<template>
  <div id="index-header">
    <div class="app-container clearfix head-content">
      <div class="fl banner-img" :class="{'iconfont ico-haoxiadan': !isInHome}" @click="backIndex"></div>
      <!-- 
        店铺logo（暂时注释掉）
        <div class="fl header-photo" v-if="!isInGoods">
        <img v-lazy="storeInfo.storeLogo">
      </div> -->
      <!-- <div class="fl banner-imgs"></div> -->
      <div class="fr" :class="{'search-box': isInGoods}">
        <div class="search fl">
          <div>
            <form @submit.prevent="doSearch(key)">
              <header-select v-model="search" :options="searchTitles" v-show="isInGoods"></header-select>
              <input type="text" v-model="key" class="search-inp"><button type="submit" class="search-btn"></button>
            </form>
            <button type="button" class="btn-store" v-show="!isInGoods" @click="searchInSelfStore(key)">搜本店</button>
          </div>
          <div class="hot-search" :class="{'goods': !isInGoods}">
            <!-- <span>热搜：</span> -->
            <span class="hot-text" v-for="(hot,index) in hotList" :key="index" v-text="hot" @click="doSearch(hot, 1)"></span>
          </div>
        </div>
      </div>
    </div>
    <!-- 滚动到达一定高度时,该组件的样式 -->
    <div class="clearfix scroll-seach transOpacity" v-show="!isScroll" :style="{left: `${scrollLeft}px`}" :class="{hover: hover}">
      <div class="app-container">
        <div class="fl newbanner-img" @click="Top"></div>
        <!-- <div class="fl banner-imgs"></div> -->
        <div class="search-box">
          <div class="search">
            <div>
              <form @submit.prevent="doSearch(key)">
                <header-select v-model="search" :options="searchTitles"></header-select>
                <input type="text" v-model="key" class="search-inp"><button type="submit" class="search-btn searchBtn" style="float: left;"></button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiHotSearch } from '../../common/api'
import { windowScroll } from '../../common/util'
import headerSelect from './headerSelect.vue'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      searchTitles: [
        {label: '宝贝', value: 1},
        {label: '店铺', value: 2}
      ],
      hotList: [''],
      key: '' || this.$route.query.key || this.$route.query.name,
      search: Number(this.$route.query.st || '1'),
      param: {
        keyWord: '' || this.$route.query.key || this.$route.query.name,
        currentPage: 1,
        searchType: 'goods',
        goodsPro: '',
        showCount: 10,
        gcIdThird: ''
      },
      isScroll: true, // 判断是否滚动
      scrollLeft: 0,
      hover: false,
      returnIndex: -1
    }
  },
  components: {
    headerSelect
  },
  computed: {
    ...mapGetters(['storeInfo']),
    isInGoods() {
      if (this.$route.path.indexOf('/goods/detail') != 0) {
        return true
      }
      return false
    },
    isInHome() {
      if (this.$route.path.indexOf('/index') == 0 || this.$route.path == '/') {
        return true
      }
      return false
    }
  },
  created() {
    // 查询热搜的内容
    apiHotSearch().then(data => {
      this.hotList = data.sysconfig.hotSearchs
    })
  },
  watch: {
    $route(to, from) {
      this.key = this.$route.query.key
    }
  },
  mounted() {
    if (this.$route.path == '/') {
      // 初始化滚动时间
      windowScroll.init()
      // 当滚动超出网页的可见区域50%，则更改搜索样式
      windowScroll.setCallBack(() => {
        const sl = -Math.max(document.body.scrollLeft, document.documentElement.scrollLeft)
        this.scrollLeft = sl
        // console.log($(window).scrollTop(), window.offsetTop, screen.availHeight * 0.45)

        // 滚动效果
        if ($(window).scrollTop() > screen.availHeight * 0.45) {
          setTimeout(() => {
            this.hover = true
          }, 800)
          this.isScroll = false
        } else {
          this.hover = false
          this.isScroll = true
        }
      })
    }
  },
  methods: {
    doSearch(key, id) {
      this.key = key
      if (id) {
        this.search = 1
      }
      switch (this.search) {
        // 当前是商品搜索
        case 1:
          // 商品搜索
          this.param.searchType = 'goods'
          // 设置关键词
          this.param.keyWord = key
          // 跳转到搜索界面
          if (!this.param.keyWord) {
            this.param.keyWord = ''
          }
          this.$router.push(`/search/goods?type=goods&st=1&key=${decodeURIComponent(encodeURIComponent(this.param.keyWord))}&ob=&r=${Math.random() * 1}`)
          break
        // 店铺搜索
        case 2:
          // 店铺搜索
          this.param.searchType = 'store'
          // // 清空关键词
          this.param.keyWord = key
          // 跳转到店铺搜索页面
          if (!this.param.keyWord) {
            this.param.keyWord = ''
          }
          this.$router.push(`/search/stores?type=stores&st=2&key=${decodeURIComponent(encodeURIComponent(this.param.keyWord))}&r=${Math.random() * 1}`)
          break
        // 当前是品牌搜索
        case 3:
          // 品牌搜索
          this.param.searchType = 'goods'
          // // 品牌名称
          this.param.brandName = key
          // 跳转到搜索页面
          if (!this.param.brandName) {
            this.param.brandName = ''
          }
          this.$router.push(`/search/goods?type=goods&st=3&name=${decodeURIComponent(encodeURIComponent(this.param.brandName))}&ob=&r=${Math.random() * 1}`)
          break
      }
      // 如果当前是商品搜索页面
      // if ((this.$route.path.indexOf('/search/goods') || this.$route.path.indexOf('/search/stores')) >= 0) {
      //   // 执行查询
      //   this.$store.dispatch('fetchSerachGoods')
      // }
    },

    /**
     * 在本店铺搜索
     *
     * @param { String } key 关键词
     */
    searchInSelfStore(key) {
      // 商品搜索
      this.param.searchType = 'goods'
      // 设置关键词
      this.param.keyWord = key || ''
      // 店铺id
      this.param.storeId = this.storeInfo.storeId
      // 跳转到搜索界面
      this.$router.push(`/search/goods?type=goods&sid=${this.storeInfo.storeId}&st=1&key=${decodeURIComponent(encodeURIComponent(this.param.keyWord))}&ob=&r=${Math.random() * 1}`)
    },

    // 返回首页
    backIndex() {
      if (this.$route.path.indexOf('/index/') == 0) {
        this.$emit('on-index', this.returnIndex)
      }
      this.$router.replace('/')
      // this.$router.push('/') // 重新加载首页
    },
    Top() {
      // 让页面跳转到顶部
      window.scroll(0, 0)
    }
  }
}
</script>

<style lang="scss">
.head-content {
  .ico-haoxiadan {
    margin-top: 30px !important;
  }
}
.scroll-seach {
  .select-wrap {
    // background-color: #ffffff!important;
    padding: 3px;
    margin-right: -5px;
    border-right: 1px solid #ccc;
    float: left;
    .form-control {
      color: #000!important;
    }
    .ico-drop {
      background-image: url('../../assets/new_down.png') !important;
      top: 12px!important;
    }
    .select-drop {
      left: 0px; 
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@media screen and (max-width: 1230px) {

  #index-header {
    .scroll-seach {
      .app-container {
        width: 100%;
        min-width: auto;
        .search-inp {
          width: 50%
        }
      }
    }
    .scroll-seach {
      form {
        width: 60%
      }
    } 
  }
}
.hover {
  opacity: 1!important;
}
.transOpacity {
  opacity: 0;
  transition: all 500ms ease;
  -moz-transition: all 500ms ease; /* Firefox 4 */
  -webkit-transition: all 500ms ease; /* Safari and Chrome */
  -o-transition: all 500ms ease; /* Opera */
}
#index-header {
  width: 100%;
  background-color: $color-white;
  .search-box{
    margin-right:310px;
  }
  .head-content {
    height: 108px;
    // padding-left: 20px;
    background-color: #fff;
    position: relative;
    .banner-img {
      color: #ee0077;
      width: 82px;
      height: 33px;
      background-size: auto;
      font-size: 36px;
      margin-top: 0px;
      cursor: pointer;
    }
    .header-photo {
      border-left: 2px solid #dbdbdb;
      float: left;
      width: 90px;
      height: 40px;
      margin-top: 30px;
      margin-left: 24px;
      padding-left: 24px;
    }
    // .banner-imgs {
    //   width: 165px;
    //   height: 40px;
    //   background: url('../../assets/hall.png') no-repeat;
    //   background-size: 100%;
    //   margin-top: 30px;
    //   cursor: pointer;
    //   margin-left: 20px;
    // }
    .search {
      margin-top: 26px;
      .search-term {
        padding-top: 5px;
        span {
          padding: 3px 14px;
          font-size: 16px;
          color: $color-main;
          cursor: pointer;
          &.selected {
            background-color: $color-main;
            color: $color-white;
          }
        }
      }
      form {
        border: 2px solid $color-main;
        display: inline-block;
        width: 558px;
      }
      
      .hot-search {
        color: $color-gray;
        cursor: pointer;
        font-size: 12px;
        padding:6px 0px;
        text-align: left;
        margin-left: 75px;

        &.goods {
          margin-left: 0px;
        }

        .hot-text {
          padding: 0 8px;
          font-size: 12px;
          color: $color-gray;
          cursor: pointer;
          border-right:1px solid  $color-gray;
          &:hover {
            color: $color-main
          }
          &:last-child{
            border-right:none;
          }
        }
      }
    }
  }
  .search-inp {
    width: 360px;
    height: 36px;
    border-left: 1px solid $color-main;
    border-right: 0px;
    padding: 2px 0px 2px 6px;
  }
  .search-btn {
    width: 80px;
    height: 36px;
    background-color: $color-main;
    color: $color-white;
    font-size: 16px;
    float: right;
    background:$color-main url('../../assets/search.png') no-repeat center center;
    background-size: auto 25px;
    border:none;
  }
  .btn-store {
    background-color: #282627;
    color: #ffffff;
    font-size: 14px;
    width: 80px;
    height: 40px;
    text-align: center;
    vertical-align: bottom;
  }
  // 滚动时样式
  .scroll-seach {
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: #fff;
    width: 100%;
    padding: 6px;
    left: 0;
    right: 0;
    margin: auto;
    // opacity: 0;
    border-bottom: 2px solid $color-main;
    .newbanner-img {
      width: 83px;
      height: 34px;
      margin-left: 50px;
      background: url('../../assets/logo.png') no-repeat;
      background-size: 100%;
      cursor: pointer;
      z-index: 10;
      position: relative;
    }
    .select-wrap {
      background-color: $bg-disabled;
      border-right: 1px solid #fff;
    }
    .search-inp {
      width: 548px;
      float: left;
      background-color: $bg-disabled;
    }
    .searchBtn {
      width: 80px;
      // margin-left: 50px;
    }
    form {
      width: 700px;
      height: 37px;
      text-align: center;
      margin: 0 auto;
    }
    .search-box {
      position: relative;
      text-align: center;
      margin-right: 0
    }
  } 
}
</style>